<template>
  <div id="app-container">
    <el-container>
      <el-header style="width:1200px; margin:0 auto;">
        <!-- 导航 -->
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
          <el-menu-item index="0" disabled>LOGO</el-menu-item>
          <el-menu-item index="1"> <router-link to="/Home">主页</router-link> </el-menu-item>
          <el-menu-item index="2">分页1</el-menu-item>
          <el-menu-item index="3">分页2</el-menu-item>
          <div class="logReg">
            <el-button type="primary" round @click.native="goLogin">登录</el-button>
            <el-button type="primary" round @click.native="goRegist">注册</el-button>
          </div>
        </el-menu>
      </el-header>
      <!-- 导航 end -->
      <el-main>
        <router-view></router-view>
      </el-main>

      <!-- 底部 -->
      <el-footer style="height:auto">
        <div class="footer-container" v-if="bot">
          <ul class="footer-link-list" style="border-right: 1px solid hsla(0,0%,100%,.1);">
            <li class="website">
              <h6>趣链官网</h6>
              <a href="http://www.hyperchain.cn/"></a>
              <img src="https://dev.hyperchain.cn/assets/images/bc762042.official-website.png" alt="official-website">
            </li>
          </ul>

          <ul class="footer-link-list" style="padding-left: 60px; width:800px;">
            <li class="website">
              <h6>资源</h6>
                <ul class="footer-link-zlist">
                  <li class="">
                    <a href="#">SDK</a>
                  </li>
                  <li class="">
                    <a href="#">API</a>
                  </li>
                  <li class="">
                    <a href="#">在线IDE</a>
                  </li>
                </ul>
            </li>

            <li class="website">
              <h6>帮助网站</h6>
                <ul class="footer-link-zlist">
                  <li class="">
                    <a href="#">Solidity语言</a>
                  </li>
                  <li class="">
                    <a href="#">趣链帮助中心</a>
                  </li>
                </ul>
            </li>

            <li class="website">
              <h6>联系我们</h6>
                <ul class="footer-link-zlist">
                  <li class="">
                    <a href="#">招聘与咨询：0571-87203334</a>
                  </li>
                  <li class="">
                    <a href="#">邮箱：support.dev@hyperchain.cn</a>
                  </li>
                  <li class="">
                    <a href="#">QQ交流群：516840101</a>
                  </li>
                  <li class="">
                    <a href="#">微信公众号：</a>
                  </li>
                </ul>
            </li>
            
          </ul>

        </div>
        <div class="footer-copyright">
          <p>版权所有 ©  杭州趣链科技有限公司 － 浙ICP备16033604号-1    杭州市文三路199号创业大厦7号楼2层</p>
        </div>
      </el-footer>
      <!-- 底部 end -->
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: function () {
    return {
      activeIndex: "1",
      bot: false
    }
  },
  methods: {
    goLogin: function () {
      location.hash = "#/LogReg/Login"
    },
    goRegist: function () {
      location.hash = "#/LogReg/Regist"
    }
  }
}
</script>

<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }
li{
  list-style: none;
}
a{
  text-decoration: none;
}
a:hover{
  text-decoration: none;
}
#app-container .el-container{
  min-height: 1000px;
}
.el-main{
  padding: 0
}
.el-container .el-footer{
  padding: 0;
  width: 100%;
  background: #292e36;
}
.el-container .footer-container{
    display: flex;
    align-content: flex-start;
    width: 1000px;
    margin: 0 auto;
    padding-bottom: 30px;
    padding-top: 48px;
    background-color: #292e36;
    color: #fff;
}
.el-container .footer-container .footer-link-list{
  width: 190px;
  display: flex;
  align-content: flex-start;
  margin-top: 0;
  margin-bottom: 0;
}
.el-container .footer-container .footer-link-list .website{
  width: 300px;
  margin-right: 0;
}
.el-container .footer-container .footer-link-list .website h6{
  margin-bottom: 20px;
  font-size: 16px;
  color: #fff;
  font-weight: 400;
}
.el-container .footer-container .footer-link-list .website img{
  opacity: .6;
    width: 129px;
    height: 39px;
    opacity: 1;
    transition: all .3s ease;
}
.el-container .footer-container .footer-link-list .website a{
  color: hsla(0,0%,100%,.6);
  font-size: 14px;
}
.el-container .footer-container .footer-link-list .website a:hover{
  color: white;
}
.footer-link-zlist li{
  padding: 5px 0;
}

.el-footer .footer-copyright {
    height: 60px;
    background: #20242b;
    flex: 0 0 auto;
}
.el-footer .footer-copyright p {
    text-align: center;
    font-size: 13px;
    margin-top: 0;
    margin-bottom: 0;
    height: 60px;
    line-height: 60px;
    color: hsla(0,0%,100%,.5);
    margin: 0 auto;
    width: 1000px;
}
.logReg{
  display: inline-block;
  position: absolute;
  top: 10px;
  right: 20px;
}
</style>
